<template>


  <div style="background-color:#;">
    <div class="background">
    <img :src="imgSrc" width="100%" height="100%" alt="" />
</div>
    <!-- 定义页面的结构 -->
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="家政" />
      </van-sticky>
    </div>
    <!-- 轮播图 -->
    <div class="Mine-categories-swipe">
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item>
          <img src="@/assets/b1.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/b2.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/b3.png" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 菜单栏 -->
    <div class="menu">
      <van-row type="flex" justify="space-between">
        <van-col span="6">
          <div style="text-align: center">
            <!-- <span @click="go" href="#">家政介绍</span> -->
            <van-button type="default" style="background-color:transparent; border:0px" @click="go">
              家政介绍
            </van-button>

            <img
              src="@/assets/c1.png"
              style="height: 60px; width: 80px"
              alt=""
            />
          </div>
        </van-col>
        <van-col span="6"
          ><div style="text-align: center">
            <van-button type="default" style="background-color:transparent; border:0px" @click="go1">
              产品列表
            </van-button>
            <img
              src="@/assets/c2.png"
              style="height: 60px; width: 80px"
              alt=""
            />
          </div>
        </van-col>
        <van-col span="6"
          ><div style="text-align: center" @click="go2">
            <van-button type="default" style="background-color:transparent; border:0px">
              顾客介绍
            </van-button>

            <img
              src="@/assets/c3.png"
              style="height: 60px; width: 80px"
              alt=""
            />
          </div>
        </van-col>
      </van-row>
    </div>
    <br />
    <br />

    <!-- 底部产品展示区域 -->
    <div class="product">
      <div style="color:#D23B8C">推荐列表</div>
      <van-row type="flex" justify="space-around" style="text-align: center">
        <van-col span="12">
          <div>
            <img
              src="@/assets/d1.png"
              style="height: 100px; width: 150px"
              alt=""
            />
            <div>
              <span style="text-align: center">地面清洁</span>
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div>
            <img
              src="@/assets/d2.png"
              style="height: 100px; width: 150px"
              alt=""
            />
            <div>
              <span>物品管理</span>
            </div>
          </div>
        </van-col>
      </van-row>
      <br><br>

      <van-row type="flex" justify="space-around" style="text-align: center">
        <van-col span="12">
          <div>
            <img
              src="@/assets/d3.png"
              style="height: 100px; width: 150px"
              alt=""
            />
            <div>
              <span style="text-align: center">厨房整理</span>
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div>
            <img
              src="@/assets/d4.png"
              style="height: 100px; width: 150px"
              alt=""
            />
            <div>
              <span>院亭修理</span>
            </div>
          </div>
        </van-col>
      </van-row>
      <br><br>

      <van-row type="flex" justify="space-around" style="text-align: center">
        <van-col span="12">
          <div>
            <img
              src="@/assets/d5.png"
              style="height: 100px; width: 150px"
              alt=""
            />
            <div>
              <span style="text-align: center">照看孩子</span>
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div>
            <img
              src="@/assets/d6.png"
              style="height: 100px; width: 150px"
              alt=""
            />
            <div>
              <span>床被整理</span>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
    <div style="height:70px"></div>
  </div>
</template>

<script>
export default {
   name: 'Home',
  data() {
    return {
      

       imgSrc:require('@/assets/1122.jpg')
    };
  },
  methods: {
     go(){
              this.$router.push({
                path:'/aaa',
              })
          },
          go1(){
              this.$router.push({
                path:'/bbb',
              })
          },
          go2(){
              this.$router.push({
                path:'/ccc',
              })
          }
  },
};
</script>

<style scoped>
/* 设置轮播区域的样式 */

.my-swipe .van-swipe-item {
  width: 100%;
  height: 200px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  /* background-color: #39a9ed; */
}

.Mine-categories-swipe img {
  display: inline-block;
  width: 100%;
  height: 200px;
}

.menu {
  margin-top: 20px;
}
.background{
    width:100%;  
    height:100%;
    z-index:-1;
    position: absolute;
}
 
.front{
    /* z-index:1; */
    position: absolute;
}
</style>